<template>
  <div class="cart">
    <receiving-address ref="address"></receiving-address>
    <el-table
      ref="multipleTable"
      :data="dataArray"
      stripe:true
      tooltip-effect="dark"
      style="width: 100%;margin-top: 20px;"
      :reserve-selection="true"
      :row-key="(row) => { return row.id }"
      @selection-change="handleSelectionChange"
      :row-class-name="rowClassName">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="商品">
        <template slot-scope="scope">
          <div class="goods">
            <img :src="$store.state.imgShowRoad + '/file/' + scope.row.picture" alt=""/>
            <div class="info">
              <h4 class="title">{{ scope.row.title }}</h4>
              <p class="content">{{ scope.row.content }}</p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="单价" width="120">
        <template slot-scope="scope">
          <p class="price">￥{{ scope.row.price }}</p>
        </template>
      </el-table-column>
      <el-table-column label="数量" width="180">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.count" @change="handleChange($event,scope.row)" :min="1" :max="1000000000" style="width:120px;"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="操作" show-overflow-tooltip width="100">
        <template slot-scope="scope">
          <el-button type="info" class="delete-bar" @click="deleteClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px" class="cancle">
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
    <div class="submit">
      <div class="total-price">
        <span>总价:￥{{ totalprice }}</span>
      </div>
      <el-button type="danger" @click="payment" class="place-order">提交订单</el-button>
    </div>
  </div>
</template>

<script>
import { alipayRoad } from "../api/alipay";
import { cartDeleteOrder, cartShow,updateGoodsCount } from "../api/cart";
import ReceivingAddress from "../components/ReceivingAddress.vue";
import {selectDefaultByOwnName} from "../api/address";
// 从../api/alipay导入alipayRoad函数
// 从../api/cart导入cartDeleteOrder、cartShow和updateGoodsCount函数
// 从../components/ReceivingAddress导入ReceivingAddress组件
// 从../api/address导入selectDefaultByOwnName函数

export default {
  inject: ["reload"],
  // 注入名为reload的属性

  components: { ReceivingAddress },
  // 注册名为ReceivingAddress的组件

  data() {
    return {
      dataArray: [],
      // 创建一个名为dataArray的数组，用于存储数据
      totalprice: "",
      // 创建一个名为totalprice的变量，用于存储总价格
      addressData:{}
      // 创建一个名为addressData的对象，用于存储地址数据
    };
  },

  computed: {},
  methods: {
    //获取当前的行数
    rowClassName({ row, rowIndex }) {
      //把每一行的索引放进row
      row.index = rowIndex;
    },
    payment() {
      // 创建一个名为payment的方法
      console.log('this.multipleSelection',this.multipleSelection)
      // 打印this.multipleSelection
      if(this.multipleSelection&&this.multipleSelection.length>0){
        // 如果this.multipleSelection不为空且长度大于0
        alipayRoad({
          // 调用alipayRoad函数，传入一个对象作为参数
          addId: this.addressData.id,
          // 将this.addressData.id赋值给addId属性
          tMoney: this.totalprice,
          // 将this.totalprice赋值给tMoney属性
          shoppingModelList: this.multipleSelection,
          // 将this.multipleSelection赋值给shoppingModelList属性
          name: this.multipleSelection.title
        })
            .then((res) => {
              this.$store.commit("updatePaymentInfo", res);
              // 调用this.$store.commit方法，触发名为updatePaymentInfo的mutation，传入res作为参数
              this.reload();
              // 调用this.reload方法
              // 打开新页面
              window.open('http://localhost/alipay/pay?traceNo=' + this.addressData.id + "&totalAmount=" + this.totalprice + '&subject=' + this.multipleSelection.title)
            })
            .catch((err) => {
              console.log(err);
              // 打印错误信息
            });
      }else{
        this.$message.error('请选择商品')
        // 显示一个错误信息提示框，提示用户选择商品
      }
    },
    deleteClick(row) {
      // 创建一个名为deleteClick的方法，接受row作为参数
      this.$confirm('确认删除该商品?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 如果点击了确定按钮
        cartDeleteOrder({
          // 调用cartDeleteOrder函数，传入一个对象作为参数
          order_id: row.shoppingId,
          // 将row.shoppingId赋值给order_id属性
        }).then((res) => {
          this.$message.success("删除成功");
          // 显示一个成功信息提示框，提示删除成功
          this.getOrderList()
          // 调用this.getOrderList方法
        }).catch((err) => {
          this.$message.error("删除失败");
          // 显示一个错误信息提示框，提示删除失败
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    toggleSelection(rows) {
      // 创建一个名为toggleSelection的方法，接受rows作为参数
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
          // 调用this.$refs.multipleTable.toggleRowSelection方法，切换行的选中状态
        });

      } else {
        this.$refs.multipleTable.clearSelection();
        // 调用this.$refs.multipleTable.clearSelection方法，清除所有行的选中状态
      }
    },
    handleSelectionChange(val) {
      // 创建一个名为handleSelectionChange的方法，接受val作为参数
      this.multipleSelection = val;
      // 将val赋值给this.multipleSelection
      localStorage.setItem('multipleSelection',JSON.stringify(this.multipleSelection))
      // 在函数体内，首先将val赋值给了this.multipleSelection。然后，使用localStorage.setItem方法将this.multipleSelection以JSON字符串的形式存储在本地存储中
      let sum = 0
      val.forEach(e=>{
        //接下来，定义了一个变量sum并初始化为0。然后，使用forEach方法遍历val数组中的每个元素，并对每个元素进行操作。
        sum = sum+(Number(e.price)* e.count)
        this.totalprice = sum
        // 在循环体内，首先计算了当前元素的价格乘以数量的结果，并将其加到sum中。然后，将sum赋值给this.totalprice。
        console.log('this.totalprice',this.totalprice)
      })
      //总结来说，这段代码的功能是根据选中的元素的价格和数量计算出总价，并将总价存储在this.totalprice中。同时，将选中的元素存储在本地存储中。
    },
    calPrice(){
      // 创建一个名为calPrice的方法,该方法的作用是计算商品的总价格。
      let sum = 0
      // 代码声明了一个变量sum并将其初始化为0。
      this.multipleSelection = JSON.parse(localStorage.getItem('multipleSelection'))
//代码通过localStorage.getItem('multipleSelection')获取了名为multipleSelection的本地存储数据，
// 并使用JSON.parse方法将其转换为JSON对象。然后，将转换后的值赋给了this.multipleSelection。
      if(this.multipleSelection&&this.multipleSelection.length>0){
        //代码使用条件语句判断this.multipleSelection是否存在且长度大于0。如果满足条件，则执行以下操作：
        this.dataArray.forEach(e=>{
          //遍历this.dataArray数组中的每个元素，使用forEach方法传入一个回调函数，该回调函数的参数e表示数组中的当前元素。
          this.multipleSelection.forEach(e1 => {
            //在回调函数中，再次遍历this.multipleSelection数组中的每个元素，使用forEach方法传入一个回调函数，该回调函数的参数e1表示数组中的当前元素。
            if(e.shoppingId === e1.shoppingId){
              //在内层回调函数中，使用条件语句判断e.shoppingId是否等于e1.shoppingId。如果满足条件，则执行以下操作：
              sum = sum+(Number(e1.price)* e.count)
              //将e1.price转换为数字类型，并与e.count相乘，然后将结果加到sum上。
              this.totalprice = sum
              //将sum的值赋给this.totalprice。
            }
          })
        })
      }
    },
    // 更新商品数量
    handleChange(val,row){
      //函数接受两个参数，val表示输入框的值，row表示当前行的数据。
      if(this.multipleSelection&&this.multipleSelection.length>0){
        //代码会检查是否存在multipleSelection且长度大于0，如果满足条件，则遍历multipleSelection数组。
        this.multipleSelection.forEach(e => {
          //对于每个元素e，如果其shoppingId属性与当前行的shoppingId相等，则将其count属性更新为val。
          if(e.shoppingId === row.shoppingId){
            e.count = val
          }
        })
        localStorage.setItem('multipleSelection',JSON.stringify(this.multipleSelection))
        //代码会将更新后的multipleSelection数组存储到localStorage中，使用JSON.stringify将其转换为字符串
      }

      updateGoodsCount({
        // 调用updateGoodsCount函数，传入一个对象作为参数
        count:val,
        // 将val赋值给count属性
        id:row.shoppingId
        // id属性的值为当前行的shoppingId。
      }).then(res=>{
        // updateGoodsCount函数返回一个Promise对象，当Promise对象的状态变为resolved时，会执行then方法中的回调函数。
        this.multipleSelection = JSON.parse(localStorage.getItem('multipleSelection'))
        // 在回调函数中，代码将localStorage中的multipleSelection键的值转换为JSON对象，并将其赋值给this.multipleSelection。
        this.calPrice()
        // 然后，代码调用this.calPrice方法。
      }).catch(err=>{
        console.log(err)
        // Promise对象的状态变为rejected，即出现错误，会执行catch方法中的回调函数。在回调函数中，代码打印错误信息。
      })
      //总结起来，这段代码的作用是更新multipleSelection数组中指定元素的count属性，并将更新后的数组存储到localStorage中。
      // 然后，调用updateGoodsCount函数，并根据返回的结果执行相应的操作。
      // 最后，调用this.calPrice方法。
    },
    getOrderList(){
      // 创建一个名为getOrderList的方法
      cartShow({}).then((res) => {
        // 调用cartShow函数，传入一个空对象{}作为参数，返回一个Promise对象
        // if (res.flag == true) {
          this.dataArray = res.data;
          // 将返回的数据赋值给this.dataArray
          this.totalprice = 0;
          // 将this.totalprice设置为0
        // } else {
        //   this.$message.error('您未登录，请先登录')
        //   // 显示一个错误信息提示框，提示用户未登录，请先登录
        //   this.$router.push("/login")
        //   // 跳转到"/login"路由
        // }
      })
          .catch((err) => {
            console.log(err);
            // 打印错误信息
          });
    }
  },
  created() {
    // 在组件创建时执行以下操作
    if (this.$store.state.token == "") {
      alert;
    }
    this.getOrderList()
    // 调用this.getOrderList方法
    this.$store.commit("updateActiveIndex", "6");
    // 调用this.$store.commit方法，触发名为updateActiveIndex的mutation，传入参数"6"
    selectDefaultByOwnName({})
        .then((res) => {
          // 调用selectDefaultByOwnName函数，传入一个空对象{}作为参数，返回一个Promise对象
          this.addressData = res.data;
          // 将返回的数据赋值给this.addressData
        })
        .catch((err) => {
          console.log(err);
          // 打印错误信息
        });
  },
};
</script>
<style lang="less" scoped>
.cart {
  width: 1100px;
  margin: 10px auto;
  background: #fff;
  padding: 10px 20px;
  .goods {
    width: 500px;
    img {
      float: left;
      width: 150px;
      height: 100px;
      margin-right: 10px;
      border-radius: 6px;
    }
    .info {
      // float: left;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      .title {
        margin: 0;
      }
      .content {
        height: 65px;
        // width: 200px;
        /*超出的部分隐藏*/
        overflow: hidden;
        /*文字用省略号替代超出的部分*/
        text-overflow: ellipsis;
        /*弹性伸缩盒子模型显示*/
        display: -webkit-box;
        /*限制在一个块元素显示文本的行数*/
        -webkit-line-clamp: 3;
        /*设置或检索伸缩盒对象的子元素排列方式*/
        -webkit-box-orient: vertical;
      }
    }
  }
  .price,
  .subtotal {
    color: red;
  }
  .count {
    .itxt {
      width: 40px;
      height: 30px;
      margin: 0 10px;
    }
    button {
      display: inline-block;
      width: 20px;
      height: 20px;
      padding: 0;
      text-align: center;
      line-height: 20px;
      border: 1px solid darkgray;
      font-size: 20px;
    }
  }
  .cancle {
    float: left;
  }
  .submit {
    margin-top: 20px;
    float: right;
    width: 300px;
    height: 40px;
    .total-price {
      font-size: 20px;
      float: left;
      color: red;
      // margin-right: 50px;
      line-height: 40px;
    }
    .place-order {
      float: right;
    }
  }
}
.delete-bar {
  width: 60px;
  height: 30px;
  padding: 0;
  span {
    margin: 0;
  }
}
</style>
